/*
 * @Date: 2022-03-17 01:12:49
 * @Author: 1365595476@qq.com
 * @LastEditors: 1365595476@qq.com
 * @LastEditTime: 2022-03-19 00:42:55
 */
import React, { Suspense } from 'react'
import { connect } from 'react-redux'

import {
  HashRouter,
  Redirect,
  Route,
  Switch
} from 'react-router-dom'

import { A_getUserInfo } from '@/store/actions/user_action'

import LoadingPage from '@/components/LoadingPage'

import { routes } from './RouterConfig'


// function AppRouter (props) {
//   const { A_getUserInfo } = props

//   A_getUserInfo()

//   return (
//     <BrowserRouter>
//       <Switch>
//         {
//           <Route
//             path="/"
//             render={() => {
//               // return (
//               //   <RenderRouterHook />
//               // )
//               return (
//                 <div>12454</div>
//               )
//             }}
//           />
//           // 加载默认不需要权限的页面
//           // routes.map((route, index) => {
//           //   // 检查是否存在重定向
//           //   if (route.redirect) {
//           //     return (
//           //       <Redirect
//           //         key={route.path || index}
//           //         exact={route.exact}
//           //         strict={route.strict}
//           //         from={route.path}
//           //         to={route.redirect}
//           //       />
//           //     )
//           //   } else {
//           //     return (
//           //       <Route
//           //         key={route.path || index}
//           //         path={route.path}
//           //         exact={route.exact}
//           //         strict={route.strict}
//           //         render={() => {
//           //           A_getUserInfo().then(asyncRoutes => {
//           //             console.log(asyncRoutes)
//           //           })
//           //           return (
//           //             <Suspense>
//           //               <route.component route={route} />
//           //             </Suspense>
//           //           )
//           //         }}
//           //       />
//           //     )
//           //   }
//           // })
//         }
//       </Switch>
//     </BrowserRouter>
//   )
// }

// class RouterUI extends React.Component {
//   constructor (...args) {
//     super(...args)
//     console.log(this.props)
//   }

//   componentDidMount () {
//     const { A_getUserInfo } = this.props

//     A_getUserInfo(123)
//   }

//   render () {
//     console.log(this.props)
//     return (
//       <div>
//         <h1>当前求和为：{this.props.user}</h1>
//       </div>
//     )
//   }
// }



// function AppRouter(props) {
//   console.log(props)

//   return

//   // const { A_getUserInfo } = props

//   // A_getUserInfo(454545).then(res => {
//   //   console.log(res)
//   // })

//   // return (
//   //   <HashRouter>
//   //     <Switch>
//   //       {
//   //         <Suspense fallback={<LoadingPage />}>
//   //           <Route render={() => {
//   //               return (
//   //                 <div>{props[0].path}</div>
//   //               )
//   //           }}
//   //         </Suspense>
//   //         // <Route
//   //         //   path="/"
//   //         //   render={() => {
//   //         //     return (
//   //         //       <Suspense fallback={<LoadingPage />}>
//   //         //         <route.component route={route}>
//   //         //           {renderChildRoutes}
//   //         //         </route.component>
//   //         //       </Suspense>
//   //         //     )
//   //         //     // A_getUserInfo(454545).then(res => {
//   //         //     //   console.log(res)
//   //         //     //   return <RenderRouterHook />
//   //         //     // })
//   //         //   }}
//   //         // />
//   //       }
//   //     </Switch>
//   //   </HashRouter>
//   // )
// }

const renderRoutes = (routes, role) => {
  if (!Array.isArray(routes)) return null

  return (
    <Switch>
      {
        routes.map((route, index) => {
          /* 检查是否存在重定向 */
          if (route.redirect) {
            return (
              <Redirect
                key={route.path || index}
                exact={route.exact}
                from={route.path}
                to={route.redirect}
              />
            )
          }

          console.log(route.meta.role.includes(role))

          return (
            route.meta.role.includes(role) ?
            <Route
              key={route.path || index}
              path={route.path}
              exact={route.exact}
              render={() => {
                console.log(111)
                const renderChildRoutes = renderRoutes(route.childRoutes)
                if (route.component) {
                  return (
                    <Suspense fallback={<LoadingPage />}>
                      <route.component route={route}>
                        {renderChildRoutes}
                      </route.component>
                    </Suspense>
                  );
                }
                return renderChildRoutes
              }}
            /> : null
          )
        })
      }
    </Switch>
  )
}

function AppRouter (props) {
  console.log(props)

  props.A_getUserInfo(999)

  return <HashRouter>{renderRoutes(routes, props.role)}</HashRouter>
}

function mapStateToProps (state) {
  // state是在'./count_reducer'传进来的
	return {
    ...state.user
  }
}

function mapDispatchToProps (dispatch) {
	return {
    A_getUserInfo: token => dispatch(A_getUserInfo(token))
	}
}

export default connect(mapStateToProps, mapDispatchToProps)(AppRouter)